<!--图层-光标-->
<template>
  <g class="CursorLayer" v-if="canvasAttr.isShowCursor" :style="{ transform: 'scale(' + canvasAttr.canvasScale + ')' }">
    <!-- 十字光标 ;10 选择;20 绘图;40 移动;50 复制-->
    <g v-if="workState === 10 ||
      workState === 20 ||
      workState === 40 ||
      workState === 50 ||
      workState === 70
      ">
      <!-- 光标_水平线 -->
      <line :x1="coordinate.x - canvasAttr.cursorLang" :y1="coordinate.y" :x2="coordinate.x + canvasAttr.cursorLang"
        :y2="coordinate.y" :stroke="canvasAttr.cursorColor" :stroke-width=canvasAttr.cursorLineWidth />
      <!-- 光标_垂直线 -->
      <line :x1="coordinate.x" :y1="coordinate.y - canvasAttr.cursorLang" :x2="coordinate.x"
        :y2="coordinate.y + canvasAttr.cursorLang" :stroke="canvasAttr.cursorColor"
        :stroke-width=canvasAttr.cursorLineWidth />
    </g>
    <!-- 框光标 -30 编辑-->
    <g v-if="workState === 30">
      <!-- 光标中心_矩形 -->
      <!-- <rect :width="cursorBoxSize + 'px'" :height="cursorBoxSize + 'px'" :x="coordinate.x - cursorBoxSize / 2"
          :y="coordinate.y - cursorBoxSize / 2" :stroke="cursorColor" fill="rgba(255, 255, 255, 0)" stroke-width='1' /> -->
    </g>
    <!--十字+框光标-->
    <g v-if="workState === 0">
      <!-- 水平线_左边 -->
      <line :x1="coordinate.x - canvasAttr.cursorBoxSize / 2" :y1="coordinate.y"
        :x2="coordinate.x - canvasAttr.cursorLang" :y2="coordinate.y" :stroke="canvasAttr.cursorColor"
        :stroke-width=canvasAttr.cursorLineWidth />
      <!-- 水平线_右边 -->
      <line :x1="coordinate.x + canvasAttr.cursorBoxSize / 2" :y1="coordinate.y"
        :x2="coordinate.x + canvasAttr.cursorLang" :y2="coordinate.y" :stroke="canvasAttr.cursorColor"
        :stroke-width=canvasAttr.cursorLineWidth />
      <!-- 垂直线_上边 -->
      <line :x1="coordinate.x" :y1="coordinate.y - canvasAttr.cursorBoxSize / 2" :x2="coordinate.x"
        :y2="coordinate.y - canvasAttr.cursorLang" :stroke="canvasAttr.cursorColor"
        :stroke-width=canvasAttr.cursorLineWidth />
      <!-- 垂直线_下边 -->
      <line :x1="coordinate.x" :y1="coordinate.y + canvasAttr.cursorBoxSize / 2" :x2="coordinate.x"
        :y2="coordinate.y + canvasAttr.cursorLang" :stroke="canvasAttr.cursorColor"
        :stroke-width=canvasAttr.cursorLineWidth />
      <!-- 光标中心_矩形 -->
      <rect :width="canvasAttr.cursorBoxSize + 'px'" :height="canvasAttr.cursorBoxSize + 'px'"
        :x="coordinate.x - canvasAttr.cursorBoxSize / 2" :y="coordinate.y - canvasAttr.cursorBoxSize / 2"
        :stroke="canvasAttr.cursorColor" fill="rgba(255, 255, 255, 0)" :stroke-width=canvasAttr.cursorLineWidth />
    </g>
  </g>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { storeToRefs } from "pinia";// 引入pinia
import { useEditorStore } from "@/store"; // 引入存储
const myStore = useEditorStore(); // 使用存储
// 解构-画布
let {
  coordinate,
  workState,//工作状态
  canvasAttr,//画布属性
} = storeToRefs(myStore);

</script>

<style lang="scss" scoped></style>
